<template>
    <div class="trainProgram">
      <el-form :model="trainProgramForm"  ref="trainProgramForm" label-width="0px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item prop="majorName">
              <el-select v-model="trainProgramForm.majorID" placeholder="请选择专业" class="max-width">
               <el-option
                  v-for="item in majorList"
                  :label="item.majorName"
                  :value="item.majorID">
               </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="">
              <el-input v-model="trainProgramForm.enrollmentTime" placeholder="请输入入学年份"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="">
              <el-input v-model="trainProgramForm.schenaName" placeholder="请输入培养方案名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="overflow-clear">
            <el-button type="primary" @click="queryRes()" class="float-right">立即搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <hr>

      <div>
        <div class="float-left table-title-before">
          专业培养方案管理
        </div>
        <el-button-group style="margin-bottom:4px;" class="float-right">
          <router-link to="/NewTrainPlanStuff" tag="el-button" class="el-button--primary" >新增方案</router-link>
        </el-button-group>
      </div>

      <div class="trainProgramTable">
        <el-table
          :data="trainProgramTable"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="majorName"
            label="专业名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="majorID"
            label="专业代码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="revised"
            label="修订人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="auditor"
            label="审核人"
            width="180">
          </el-table-column>
          <el-table-column
            label="培养计划"
            width="180">
            <template scope="scope">
	          <el-button type="text" @click.native.prevent="showTrainSchema(scope.row.fileURL)">
	            {{scope.row.fileName}}
	          </el-button>
	        </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
          </el-table-column>
          <el-table-column
            label="培养内容">
            <template scope="scope">
		          <el-button @click.native.prevent="toTrainContent(scope.row.trainingSchemeID)" type="text">
		           		培养课程
		          </el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template scope="scope">
		          <el-button @click.native.prevent="updateTrainSchema(scope.row.trainingSchemeID)" type="text">
		           		 修改
		          </el-button>
		          <el-button
		            @click.native.prevent="deleteRow(scope.$index,trainProgramTable,scope.row.trainingSchemeID)"
		            type="text">
		           		 删除
		          </el-button>
            </template>
          </el-table-column>
        </el-table>
		<div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

      </div>
    </div>
</template>
<style>
</style>

<script>
    export default{
        name: 'trainProgram',
        data(){
            return{
                trainProgramForm:{
                	majorID:'',
                	enrollmentTime:'',
                	schenaName:'',
                	currentPage:'',
                	pageSize:''
                },
                currentPage: 1,
		        pageSize: 10,
		        pageSizes: [10, 20, 30, 40],
		        total: 40,
                majorList:[],
                trainProgramTable:[]
            }
        },
        created () {
      		this.getMajor();
    	},
        mounted:function(){
            this.$nextTick(function(){
              this.listTotal = this.pageSize;
              this.queryRes();
              this.getMajor();
            })
        },
        methods: {
        	getMajor(){
        		this.$http.get(`http://localhost:8080/TeachingMIS/common/getMajorList`)
		          .then((res) => {
		            console.log(res)
		            this.majorList = res.body
		          }, (err) => {
		            // 响应错误回调
		            //console.log(err)
		          })
      		},
            handleSizeChange(val) {
              //console.log(`每页 ${val} 条`);
              //改变长度
              this.listTotal = val;
              console.log(this.listTotal);
            },
            handleSizeChange(val) {
		        //console.log(`每页 ${val} 条`);
		        this.pageSize = val;
		        this.queryRes();
		    },
		    handleCurrentChange(val) {
		        this.currentPage = val;
		        this.queryRes();
		    },
            queryRes:function(){
            	this.trainProgramForm.currentPage=this.currentPage;
            	this.trainProgramForm.pageSize=this.pageSize;
            	alert(this.trainProgramForm.currentPage);
               this.$http.post('http://localhost:8080/TeachingMIS/trainingSchema/getSchemaList',this.trainProgramForm).then(response => {
                        this.trainProgramTable=response.body.schemaList
       					this.total = response.body.total;
              }, response => {
                 console.log('文件获取失败');
              });
            },
            toTrainContent(trainingSchemeID){
	        	this.$router.push({path: 'trainContent', query: {trainingSchemeID: trainingSchemeID}})
	      	},
	      	updateTrainSchema(trainingSchemeID){
	        	this.$router.push({path: 'UpdateTrainPlanStuff', query: {trainingSchemeID: trainingSchemeID}})
	      	},
	      	deleteRow(index, rows, trainingSchemeID){
		        rows.splice(index, 1)
		        this.deleteSchema(trainingSchemeID)
		    },
		    deleteSchema(trainingSchemeID){
		        this.$http.post(`http://localhost:8080/TeachingMIS/trainingSchema/deleteSchema`, {
		          trainingSchemeID: trainingSchemeID
		        })
		          .then((res) => {
		            console.log('删除成功')
		            alert('删除成功')
		          }, (err) => {
		            console.log('服务器异常')
		            alert('删除失败')
		          })
		    },
		    showTrainSchema(fileURL){
		        window.open(`${this.$until.url}/${fileURL}`)
		    },
            showLength:function(){
               console.log("this is show length");
               console.log(this.tableData.length);
               console.log("end");

            }
        }
    }
</script>
